<template>
  <div>
    <el-dialog title="用户回收站" :visible.sync="trashVisible">
    <div class="trashBox">
      <span>已选择{{num}}项</span>
      <template v-if="isExpend">
        <a @click="returnBack()">清空选择</a>
        <a @click="backData()">批量还原</a>
        <a @click="delTrue()">批量删除</a>

      </template>
    </div>
    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column align="center" type="selection" width="55"> </el-table-column>
      <el-table-column align="center" v-for="(item, index) in headerData" :key="index" :prop="item.prop"
        :label="item.label" :width="item.width">
        <template slot-scope="scope">
          <div v-if="item.pic">
            <el-image class="tablePic" :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]">
            </el-image>
          </div>
          <div v-if="!item.pic">
            {{ tableData[scope.$index][item.prop] }}
          </div>
          <div v-if="item.operation">
            <div class="opertionTo">
              <span @click="backData(scope)"><i class="
            el-icon-refresh"></i> 还原用户</span>
              <span>|</span>
              <span @click="delTrue(scope)"><i class="
              el-icon-delete"></i>彻底删除</span>
            </div>
          </div>
        </template>
      </el-table-column>


    </el-table>
  </el-dialog>

  </div>
</template>

<script>
import { trashTabledata, trashDataBack, trashDataDel } from "@/api/api-wwx/sysUser";
export default {
  props: {
    trashVisible:{
      type:Boolean,
      default: () => {
        return false;
      },
    }
  },
  data() {
    return {
      num: 0,
      headerData: [
        {
          prop: "number",
          label: "#",

          sortable: true
        },
        {
          prop: "username",
          label: "用户账号",

          sortable: true
        },
        {
          prop: "realname",
          label: "用户姓名",

        },
        {
          prop: "avatar",
          label: "头像",

          slot: true,
          pic: true
        },

        {
          prop: "orgCodeTxt",
          label: "部门",

        },
        {
          prop: "operation",
          label: "操作",

          operation: true
        },

      ],
      tableData: [],
      isExpend: false,
      idString:''
    };
  },
  methods: {
    //回收站数据获取
    trashTabledataSearch() {
      let _self = this
      trashTabledata().then(res => {
        console.log(res);
        if (res.code == 200) {
          let list = res.result;
          console.log(list);
          let num = 1
          _self.tableData = []
          for (let item of list) {
            _self.tableData.push({
              number: num,
              id: item.id,
              username: item.username,
              realname: item.realname,
              avatar: item.avatar,
              sex: item.sex,
              birthday: item.birthday,
              phone: item.phone,
              orgCodeTxt: item.orgCodeTxt,
              departIds_dictText: item.departIds_dictText,
              status_dictText: item.status_dictText,
              operation: item.operation
            });
            num++
          }
          console.log('新的tabledata', _self.tableData);
        }
      })
    },
    // 还原
    backData(scope) {
      let _self = this
      let data = {
        // userIds: scope.row.id
        userIds:_self.idString
      }
      trashDataBack(data).then(res => {
        console.log(res);
        if (res.code == 200) {
          _self.trashTabledataSearch()
        }
      })
    },
    // 彻底删除
    delTrue(scope) {
      let _self = this
      let data = {
        // userIds: scope.row.id
        userIds:_self.idString
      }
      trashDataDel(data).then(res => {
        console.log(res);
        if (res.code == 200) {
          _self.trashTabledataSearch()
        }
      })
    },
    // 多选
    handleSelectionChange(val) {
      this.num = val.length
      console.log(val);
      if (val.length) {
        this.isExpend = true
      } else {
        this.isExpend = false
      }

      let list=[]
      for(let i of val){
        list.push(i.id)
      }
      console.log(list);
      this.idString=list.join(',')
      console.log(this.idString);
    },

    
    returnBack(){
      this.trashTabledataSearch()
    }
  },
  mounted() {
    this.trashTabledataSearch()

  }
};
</script>

<style>
.opertionTo span {
  cursor: pointer;
  color: #409eff;
  margin: 0 5px
}

.trashBox a {
  border-left: 1px solid rgb(237, 237, 237);
  padding-left: 20px;
}
</style>